<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta  charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>课程上架</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin" >
  <div class="layui-header">
    <div class="layui-logo"><h1>健身房</h1></div>
    <!-- 顶部导航 -->
    <ul class="layui-nav layui-bg-cyan layui-layout-left">
      <li class="layui-nav-item">
      	<a href="">会员管理</a>
      	<dl class="layui-nav-child">
      		<dd><a href="../visit/index">会员来访</a></dd>
          	<dd><a href="../member/index">会员管理</a></dd>
            <dd><a href="../card/index_entity">会员卡管理</a></dd>
            <dd><a href="../card/index">会员卡设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item">
      	<a href="">商品管理</a>
      	<dl class="layui-nav-child">
            <dd><a href="../goods/index">商品管理</a></dd>
            <dd><a href="../goodsType/index">商品类型</a></dd>
            <dd><a href="../goodsSale/index">消费记录</a></dd>
            <dd><a href="../stock/index">库存管理</a></dd>
            <dd><a href="../operate/index">库存操作记录</a></dd>
          </dl>
      </li>
      <li class="layui-nav-item">
     	 <a href="">课程管理</a>
     	 <dl class="layui-nav-child">
            <dd><a href="/course/index">课程管理</a></dd>
            <dd><a href="/attendCourse/index">操课管理</a></dd>  
            <dd><a href="/searchOrder/index">约课管理</a></dd>          
          </dl>
      </li>
      <li class="layui-nav-item">
      	<a href="">统计报表</a>
      	<dl class="layui-nav-child">
            <dd><a href="http://localhost:8080/change_1">会员消费统计</a></dd>
            <dd><a href="http://localhost:8080/change_2">营业报表统计</a></dd>
            <dd><a href="http://localhost:8080/change_3">员工业绩管理</a></dd>
            <dd><a href="http://localhost:8080/change_7">会员来访统计</a></dd>          
        </dl>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;">更多操作</a>
        <dl class="layui-nav-child">
          <dd><a href="http://localhost:8080/setting/stuff">员工管理</a></dd>
          <dd><a href="http://localhost:8080/trainer_management">教练管理</a></dd>
          <dd><a href="http://localhost:8080/setting/database">数据库管理</a></dd>         
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img id="user_img" src="http://t.cn/RCzsdCq" class="layui-nav-img">
          <label id="user_name"></label>
        </a>
        <dl class="layui-nav-child">
          <dd><a id="userInformation" href="#">基本资料</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="http://localhost:8080/login_out">退出</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-bg-cyan layui-nav-tree">
        <li class="layui-nav-item">
          <a class="" href="javascript:;">会员管理</a>
          <dl class="layui-nav-child">
          	<dd><a href="../visit/index">会员来访</a></dd>
          	<dd><a href="../member/index">会员管理</a></dd>
            <dd><a href="../card/index_entity">会员卡管理</a></dd>
            <dd><a href="../card/index">会员卡设置</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">商品管理</a>
          <dl class="layui-nav-child">
            <dd><a href="../goods/index">商品管理</a></dd>
            <dd><a href="../goodsType/index">商品类型</a></dd>
            <dd><a href="../goodsSale/index">消费记录</a></dd>
            <dd><a href="../stock/index">库存管理</a></dd>
            <dd><a href="../operate/index">库存操作记录</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">课程管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/course/index">课程管理</a></dd>
            <dd class="layui-this"><a href="/attendCourse/index">操课管理</a></dd>
            <dd><a href="/searchOrder/index">约课管理</a></dd>            
          </dl>
        </li>
         <li class="layui-nav-item">
          <a href="javascript:;">统计报表</a>
          <dl class="layui-nav-child">
            <dd><a href="http://localhost:8080/change_1">会员消费统计</a></dd>
            <dd><a href="http://localhost:8080/change_2">营业报表统计</a></dd>
            <dd><a href="http://localhost:8080/change_3">员工业绩管理</a></dd>
            <dd><a href="http://localhost:8080/change_7">会员来访统计</a></dd>   
          </dl>
        </li>
         <li class="layui-nav-item">
        <a href="javascript:;">更多操作</a>
        <dl class="layui-nav-child">
          <dd><a href="http://localhost:8080/setting/stuff">员工管理</a></dd>
          <dd><a href="http://localhost:8080/trainer_management">教练管理</a></dd>
          <dd><a href="http://localhost:8080/setting/database">数据库管理</a></dd>         
        </dl>
      </li>       
      </ul>
    </div>
  </div>
 
<div class="layui-body">
    <!-- 内容主体区域 -->
	 <!-- 表单 -->
		<div id="dataTable"></div>
		<input type="hidden" id="hidden1">
		<input type="hidden" id="hidden2">
		<!-- 表格渲染 -->
		<table class="layui-hide" id="attendCourse_tableBox" lay-filter="attendCourse_tableBox"></table>
        <hr class="layui-bg-green">
        
		<!-- 分页 -->	
		<div id="pageBox" class="a" align="center"></div>
 
<script type="text/html" id="attendCourse_toolBarBox">
    <button class="layui-btn layui-btn-sm layui-btn-primary layui-icon layui-icon-add-1" lay-event="add" ></button>
    <button class="layui-btn layui-btn-sm layui-btn-primary layui-icon layui-icon-edit" lay-event="update"></button>
    <button class="layui-btn layui-btn-sm layui-btn-primary layui-icon layui-icon-delete" lay-event="delete"></button>  	 
</script>
<script type="text/html" id="attendCourse_toolBox">
 {{# if(d.attendCourseState=="未上架"){ }}    
 <a class="layui-btn layui-btn-sm" lay-event="upper">上架</a>
 {{# }else if(d.attendCourseState=="已上架"){ }}
<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="lower">下架</a>
{{#}}}
</script>
  </div>  
  	<div class="layui-footer" align="center">
  	<div style="padding: 15px;" align="center">
	    <span class="layui-badge-dot"></span>
		<span class="layui-badge-dot layui-bg-orange"></span>
		<span class="layui-badge-dot layui-bg-green"></span>
		<span class="layui-badge-dot layui-bg-cyan"></span>
		<span class="layui-badge-dot layui-bg-blue"></span>
		<span class="layui-badge-dot layui-bg-black"></span>
		<span class="layui-badge-dot layui-bg-gray"></span>
		<span>Copyright ©2019-2020 GYJ.All Rights Reserved.</span>
        <span class="layui-badge-dot layui-bg-gray"></span>
        <span class="layui-badge-dot layui-bg-black"></span>
        <span class="layui-badge-dot layui-bg-blue"></span>
        <span class="layui-badge-dot layui-bg-cyan"></span>
        <span class="layui-badge-dot layui-bg-green"></span>
        <span class="layui-badge-dot layui-bg-orange"></span>
        <span class="layui-badge-dot"></span>
    </div>
    	<hr class="layui-bg-cyan"> 
  	</div>
	</div>
<script src="../layui/layui.js"></script>
<script src="../js/user.js"></script>
<script type="text/javascript">
	layui.use(['laydate','jquery', 'form','laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
		var laydate = layui.laydate //日期
		var laypage = layui.laypage //分页
		var $=layui.jquery;
		var form=layui.form;
		var layer = layui.layer //弹层
		var table = layui.table //表格
		var carousel = layui.carousel //轮播
		var upload = layui.upload //上传
		var element = layui.element //元素操作
		var slider = layui.slider //滑块
		var hidden1=$("#hidden1");
		var hidden2=$("#hidden2");
		
		$.ajax({					//为头像和用户名赋值
			url:'/user/get_user',
			//dataType:'json',
			type:'get',			
			success:function(data){
				document.getElementById("user_img").src=data.image;
				document.getElementById("user_name").innerHTML=data.name;
			}
		});
		
		//表格渲染和分页					
		//点击新增会员按钮弹出一个新增弹出层
		$(document).on('click','#btnadd',function(){
			layer.open({
				type:2,
				title:"新增上架课程信息",
				content:'../attendCourse/Add',
				area:['60%','80%'],	
				end:function(){										
					window.parent.location.reload(); 					
				}			
			});
								
		});					
		//真分页
		$(function(){
			getAttendCourse(0);
		})
		function getAttendCourse(pageStart){
			hidden1.val(0);		//首次执行分页时把隐藏值置为0
			hidden2.val(0);
			table.render({
				elem:'#attendCourse_tableBox'
				,url:'/attendCourse/getBtween'
				,method:"get"
				,where:{
					pageStart:pageStart,
					pageSize:10
				}
				,parseData:function(res){				
					console.log(res)
					return{
						"code":0
						,"msg":""
						,"count":res.rowSize
						,"data":res.data
						,"curr":res.pageStart
						,"limit":res.limit
					}
				}
				,toolbar: '#attendCourse_toolBarBox' //开启头部工具栏，并为其绑定左侧模板
				,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
					title: '提示'
				    ,layEvent: 'LAYTABLE_TIPS'
				    ,icon: 'layui-icon-tips'
				 }]
				//,cellMinWidth:100
				,cols:[
			    		[
					      {type: 'checkbox', fixed: 'left'}
					      ,{field:'attendCourseState', title:'课程状态', width:100,hide:true}
					      ,{field:'attendCourseId', title:'上架课程编号', width:120, fixed: 'left',hide:true}
					      ,{field:'courseName', title:'课程名', width:100 }
					      ,{field:'trainerId', title:'教练编号', width:120,hide:true}	
					      ,{field:'trainerName', title:'上课教练', width:100}	      
					      ,{field:'courseLength', title:'课程时长', width:100}
					      ,{field:'courseNumber', title:'上课人数' ,width:100}
					      ,{field:'attendCourseTime', title:'上课时间', width:200}
					      ,{field:'attendCoursePalce', title:'上课地点', width:120}
					      ,{field:'attendCourseState', title:'课程状态', width:100}
					      ,{fixed: 'right', title:'操作', width: 200, align:'center', toolbar: '#attendCourse_toolBox'}
			   			]
			    	]
				,done:function(res,curr,count){
					console.log(res);
					laypage.render({
						elem:'pageBox'
						,count:res.count
						,limit:res.limit
						,layout: ['count','prev','page','next','skip']
						,curr:res.curr/10+1
						,jump:function(obj,first){//触发分页后的回调
							if(!first){//点击跳转触发函数自身，并传递当前页：obj.curr							
								res.pageStart=(obj.curr-1)*obj.limit;
								console.log(res.pageStart);
								getAttendCourse(res.pageStart);
								hidden1.val(0); //跳页的时候把隐藏值置为0
								hidden2.val(0);														
							}//if
						}//jump function
					});//laypage.render()
					//$current=$('.layui-table-body td[data-field="attendCourseState"]>div:contains("未上架")');
					//$current.parent().parent().css('color','#FF0000');
					$(document).ready(function(){
						hidden1.val(0);   //页面加载时把隐藏值置为0
						hidden2.val(0);
						var complete="已上架";
						var uncomplete="未上架";
						$("table tr td").find("div").each(function(){//遍历页面table中的div
							//alert(complete);
							//alert(uncomplete);
							//alert($(this).html());
							if($(this).html()==complete){ //div值为complete(已上架)则修改这一个div的样式
								$(this).css("color","green");
							}
							else if($(this).html()==uncomplete){//div值为uncomplete(未上架)则修改这一个div的样式
								$(this).css("color","red");
							}	
						});
					});
				}//done
			});//table.render()
		}//function getAttendCourse()
		$(document).on('click','#btnadd',function(){
			layer.open({
				type:2,
				title:"新增上架课程",
				content:'../attendCourse/Add',
				area:['900px','400px'],
				end:function(){
					window.parent.location.reload();
				}
			});
		});	//$document.on
		
		
		hidden1.val(0);
		hidden2.val(0);
		table.on('checkbox(attendCourse_tableBox)',function(obj){
			//console.log(obj.data.attendCourseState);
			//var s=obj.data.attendCourseState;
			if(obj.checked && obj.data.attendCourseState==="未上架"){
				console.log(obj.checked)
				hidden1.val(parseInt(hidden1.val())+1);
				console.log(hidden1.val());
			}
			if(!obj.checked && obj.data.attendCourseState==="未上架"){
				console.log(obj.checked)
				hidden1.val(parseInt(hidden1.val())-1);
				console.log(hidden1.val());
			}
			if(obj.checked && obj.data.attendCourseState==="已上架"){
				console.log(obj.checked)
				hidden2.val(parseInt(hidden2.val())+1);
				console.log(hidden2.val());
			}
			if(!obj.checked && obj.data.attendCourseState==="已上架"){
				console.log(obj.checked)
				hidden2.val(parseInt(hidden2.val())-1);
				console.log(hidden2.val());
			}
				//console.log(s);			
				//layer.msg("必须先下架课程才可以修改");
		})
		
		//表头工具监听
		 table.on('toolbar(attendCourse_tableBox)',function(res){
			 var checkStatus=table.checkStatus(res.config.id);
			 var data=checkStatus.data;
			 var event=res.event;
			 switch(res.event){
			 	case 'add':
			 		addAttendCourse();
			 		break;
			 	case 'update': 
			 		if(data.length==0){
			 			layer.msg('请选择一行');
			 		}
			 		else if(data.length>1){
			 			layer.msg('只能同时编辑一个');
			 		}
			 		else{
						if(hidden1.val()==0 && hidden2.val()==1){
							layer.msg("必须先下架课程才可以修改");
						}
						if(hidden1.val()==1 && hidden2.val()==0){
							//console.log(a.val());
		 					updateAttendCourse(checkStatus.data[0].attendCourseId,checkStatus.data[0].trainerId,checkStatus.data[0].attendCourseTime)
		 				}	
			 		}
			 		break;
			 	case 'delete':
			 		if(data.length===0){
			 			layer.msg('请选择一行');
			 		}
			 		else{
			 			layer.confirm('真的删除行么', function(index){
			 				deleteAttendCourse(checkStatus.data[0].attendCourseId,checkStatus.data[0].trainerId,checkStatus.data[0].attendCourseTime);
			 		        layer.close(index);
			 		        //向服务端发送删除指令
			 		      });
			 		 }
			 		break;			 	
			 }
		 });
				
		function addAttendCourse(){
			layer.open({
				type:2,
				title:"新增上架课程",
				content:'../attendCourse/Add',
				area:['45%','60%'],	
				end:function(){										
					getAttendCourse(0);					
				}			
			});
			$("#courseId").empty();
			$("#trainerId").empty();
		}
		function updateAttendCourse(id,tid,time){
			layer.open({
				type:2
				,title:"修改上架课程信息"
				,content:'../attendCourse/updateInfo?courseId='+id+'&trainerId='+tid+'&attendTime='+time
				,area:['45%','60%']
				,end:function(){
					getAttendCourse(0);
				}
			});
			
		} 
		function deleteAttendCourse(id,tid,time){
			$.ajax({
				type:'post'
				,url:'../attendCourse/Delete?attendCourseId='+id+'&trainerId='+tid+'&attendCourseTime='+time
				,success:function(data){
					getAttendCourse(0);
				}
			});
		}		
		//表格行工具栏渲染
		table.on('tool(attendCourse_tableBox)',function(obj){
			var data=obj.data;
			var layEvent=obj.event;
			//console.log(obj);
			//console.log(data);
			//alert(data.attendCourseId);
			//如果行工具栏的Event是upper
			if(layEvent==='upper'){
				//调用转卡的方法
				upper(data);
			}
			//如果行工具栏的Event是lower
			else if(layEvent==='lower'){
				//调用会员升级的方法
				lower(data);
			}
		});
		function upper(data){
			//console.log(data);
			$.ajax({
				type:'post'
				//,dataType:'json'
				,url:'../attendCourse/RenewStateToYes'
				,data:{
					courseId:data.attendCourseId
					,trainerId:data.trainerId
					,attendCourseTime:data.attendCourseTime
				}
				,success:function(){
					layer.msg("成功");
					getAttendCourse(0);
				}
				,error:function(){
					layer.msg("异常");
				}
			});
		}
		function lower(data){
			//console.log(data);
			$.ajax({
				type:'post'
				//,dataType:'json'
				,url:'../attendCourse/RenewStateToNo'
				,data:{
					courseId:data.attendCourseId
					,trainerId:data.trainerId
					,attendCourseTime:data.attendCourseTime
				}
				,success:function(){
					layer.msg("成功");
					getAttendCourse(0);
				}
				,error:function(){
					layer.msg("异常");
				}
			});
		}
	});
</script>
</body>
</html>